import React, {PureComponent} from "react";
import {Icon, Popconfirm, Table} from "antd";
import {connect} from "react-redux";
import {paginationProps, tableProps} from "../../lib/ui";
import {del, query, select, showEdit} from "./actions";
import {getCurrentOrganization, getLastFilter, getPrincipal} from "../../lib/identity";
import {Resizable} from 'react-resizable';

const LAST_FILTER = "orderProfit";

const ResizeableTitle = props => {
    const {onResize, width, ...restProps} = props;

    if (!width) {
        return <th {...restProps} />;
    }

    return (
        <Resizable
            width={width}
            height={0}
            onResize={onResize}
            draggableOpts={{enableUserSelectHack: false}}
        >
            <th {...restProps} />
        </Resizable>
    );
};

class List extends PureComponent {
    state = {
        columns: [
            {
                title: "进仓编号",
                dataIndex: "jcNo",
                width: 150, fixed: 'left',
                render: (text, record) => (
                    <a
                        onClick={() => {
                            this.handleShowEdit(record);
                        }}
                    >
                        {text}
                    </a>
                )
            }, {
                title: "订单编号",
                dataIndex: "orderNo",
                width: 150, fixed: 'left',
                ellipsis: true
            }, {
                title: "线路",
                dataIndex: "line",
                width: 130, fixed: 'left',
                ellipsis: true
            }, {
                title: "货物信息",
                children: [
                    {
                        title: "包装",
                        dataIndex: "pack",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "件数",
                        dataIndex: "packages",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "重量",
                        dataIndex: "weight",
                        width: 200,
                        ellipsis: true
                    }, {
                        title: "方数",
                        dataIndex: "volume",
                        width: 150,
                        ellipsis: true
                    }
                ]
            }, {
                title: "进度",
                dataIndex: "process",
                width: 100,
                ellipsis: true
            }, {
                title: "客户资料",
                children: [
                    {
                        title: "进仓单",
                        dataIndex: "jcOrder",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "报关资料",
                        dataIndex: "bgFile",
                        width: 120,
                        ellipsis: true
                    }, {
                        title: "随车资料",
                        dataIndex: "carFile",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "GNG码",
                        dataIndex: "gng",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "品名导入表",
                        dataIndex: "pName",
                        width: 80,
                        ellipsis: true
                    }
                ]
            }, {
                title: "进区关务",
                children: [
                    {
                        title: "报关预录单",
                        dataIndex: "bgyld",
                        width: 80,
                        ellipsis: true
                    }, {
                        title: "进区申报绑卡/车辆信息",
                        dataIndex: "carInfo1",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "送货时间",
                        dataIndex: "deliveryTime",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "车队",
                        dataIndex: "carGroup",
                        width: 180,
                        ellipsis: true
                    }
                ]
            }, {
                title: "装箱及关务",
                children: [
                    {
                        title: "装箱日期",
                        dataIndex: "packageTime",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "空柜绑卡进区/车辆信息",
                        dataIndex: "carInfo2",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "核放绑卡出区/车辆信息",
                        dataIndex: "carInfo3",
                        width: 180,
                        ellipsis: true
                    }, {
                        title: "箱号",
                        dataIndex: "packageNo",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "班列信息",
                        dataIndex: "blInfo",
                        width: 100,
                        ellipsis: true
                    }
                ]
            }, {
                title: "出口报关",
                children: [
                    {
                        title: "出口报关",
                        dataIndex: "ckbg",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "报转关",
                        dataIndex: "bzg",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "解锁",
                        dataIndex: "unLock",
                        width: 100,
                        ellipsis: true
                    }
                ]
            }, {
                title: "仓库进出库",
                children: [
                    {
                        title: "入库签收",
                        dataIndex: "sign",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "加固材料",
                        dataIndex: "jg",
                        width: 100,
                        ellipsis: true
                    }
                ]
            }, {
                title: "箱子及费用",
                children: [
                    {
                        title: "箱属",
                        dataIndex: "belong",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "堆存时间",
                        dataIndex: "dcTime",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "堆存费用",
                        dataIndex: "dcFee",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "放箱单号",
                        dataIndex: "pNo",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "提空费",
                        dataIndex: "pickFee",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "水单",
                        dataIndex: "sd",
                        width: 100,
                        ellipsis: true
                    }
                ]
            }, {
                title: "杂费",
                children: [
                    {
                        title: "票数",
                        dataIndex: "ticketCount",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "续页",
                        dataIndex: "xy",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "核注",
                        dataIndex: "kz",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "整柜联单及续页",
                        dataIndex: "zgld",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "压车",
                        dataIndex: "yc",
                        width: 100,
                        ellipsis: true
                    }, {
                        title: "其他",
                        dataIndex: "other",
                        width: 100,
                        ellipsis: true
                    }
                ]
            }, {
                title: "备注",
                dataIndex: "remark",
                width: 100,
                ellipsis: true
            }
        ]
    };

    handleShowEdit = row => {
        const {dispatch} = this.props;
        dispatch(showEdit(row));
    };

    onPageChange = (page, pageSize) => {
        const {dispatch, filter} = this.props;
        dispatch(query({
            "userId": getPrincipal().id,
            "organizationId": getCurrentOrganization(), ...filter,
            page,
            pageSize
        }));
    };


    handleDelete = id => {
        const {dispatch, page, pageSize, filter} = this.props;
        dispatch(del(id)).then(() => {
            dispatch(query({...filter, page, pageSize}));
        });
    };


    componentWillMount() {
        const {dispatch, page, pageSize} = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        dispatch(query({...fields, page, pageSize}));
    };

    handleResize = index => (e, {size}) => {
        this.setState(({columns}) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            };
            return {columns: nextColumns};
        });
    };

    handleSelectChange = (selectedRowKeys) => {
        const {dispatch} = this.props;
        dispatch(select(selectedRowKeys));
    };

    components = {
        header: {
            cell: ResizeableTitle,
        },
    };

    setRowClassName = (record) => {
        let className = '';
        if (record.orderLock) {
            className = 'table-color-settlement';
        }
        return className;
    }

    render() {
        const {
            page,
            pageSize,
            totalElements,
            selectedRowKeys,
            dataSource,
            loading,
        } = this.props;
        const columns = this.state.columns;
        if (getPrincipal().admin) {
            const found = columns.find(item => item.title === '功能');
            if (!found) {
                columns.push(
                    {
                        title: '功能',
                        dataIndex: '',
                        key: '',
                        width: 50,
                        align: 'center',
                        fixed: 'right',
                        render: (text, record) => <span>
                    <Popconfirm title="确定删除此记录?" okText="是" cancelText="否"
                                onConfirm={() => this.handleDelete(record.id)}>
                        <Icon type="delete"/>
                    </Popconfirm>
                </span>,
                    }
                );
            }

        }
        const resizeColumns = columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        const tablePagination = {
            ...paginationProps,
            total: totalElements,
            current: page,
            pageSize: pageSize,
            onShowSizeChange: (current, newSize) =>
                this.onPageChange && this.onPageChange(1, newSize),
            onChange: this.onPageChange
        };

        const rowSelection = {
            selectedRowKeys,
            columnWidth: '60px',
            onChange: this.handleSelectChange
        };

        return (
            <Table
                {...tableProps}
                bordered
                columns={columns}
                components={this.components}
                rowSelection={rowSelection}
                scroll={{x: 1500, y: 'calc(100vh - 500px)'}}
                pagination={tablePagination}
                dataSource={dataSource}
                loading={loading}
                rowClassName={this.setRowClassName}
            />
        );
    }
}

const
    mapStateToProps = state => {
        return {
            ...state.consolidate.list
        };
    };

export default connect(mapStateToProps)(List);
